<template>
	<view class="container">
		<view style="background-color: #fff; border-radius: 0 0 25% 25%;">
			<view class="item padding" @click="login">
				<image class="image-head" :src="avator"></image>
				<view class="itemText text-light-2-black-12 padding">
					<text class="textblack24 bold">{{ name }}</text>
					<text class="margin-top-0">关注:{{ focusNum }} &nbsp; &nbsp; &nbsp; &nbsp; 粉丝:{{ fanNum }}&nbsp;
						&nbsp;
						&nbsp; &nbsp;发布:{{ publishNum }}</text>
				</view>
				<image class="icon-small" src="../../static/smallarrow.png"></image>
			</view>
			<view class="margin">
				<view :class="vipbg">
					<view>
						<image v-show="showVipLabel" class="vipline" :src="vipLine"></image>
						<image v-show="showVipLabel" class="viplogo" :src="vipLogo"></image>
					</view>
					<view class="line padding vipContent" :class="textColor">

						<view class="height100">
							<view v-show="showVipLabel" :class="vipLable" class="text14 vipLabel">LV&nbsp;{{ level }}
							</view>
						</view>

						<view class="marginLeft height100">

							<view class="text18">{{ vipName }}</view>
							<view class="marginTop text14">

								<span>{{ vipNum }}</span>
							</view>
							<view v-show="showVipLabel" class="marginTop text14 ">
								<span>有效期至:</span>
								<span>{{ vipTime }}</span>
							</view>
						</view>
						<view class="bigEmpty"></view>
					</view>
				</view>
			</view>
		</view>

		<view class="margin whiteCircleBg">
			<view class="item padding" @click="click(1)">
				<image class="icon-normal" src="../../static/minehome.png"></image>
				<text class="text-light-black-18 bigEmpty padding">我的主页</text>
				<image class="icon-small" src="../../static/smallarrow.png"></image>
			</view>

			<view class="lineGray"></view>

			<view class="item padding" @click="click(2)">
				<image class="icon-normal" src="../../static/minestare.png"></image>
				<text class="text-light-black-18 bigEmpty padding">我的积分</text>
				<image class="icon-small" src="../../static/smallarrow.png"></image>
			</view>
			<view class="lineGray"></view>

			<view class="item padding" @click="click(4)">
				<image class="icon-normal" src="../../static/minelove.png"></image>
				<text class="text-light-black-18 bigEmpty padding">赞和收藏</text>
				<image class="icon-small" src="../../static/smallarrow.png"></image>
			</view>
			<view class="lineGray"></view>

			<view class="item padding" @click="click(5)">
				<image class="icon-normal" src="../../static/minepicture.png"></image>
				<text class="text-light-black-18 bigEmpty padding">我的图库</text>
				<image class="icon-small" src="../../static/smallarrow.png"></image>
			</view>

			<view class="lineGray"></view>
			<navigator url="/pages/MineOrder/MineOrder" hover-class="navigator-hover">
				<view class="item padding">
					<image class="icon-normal" src="../../static/mineorder.png"></image>
					<text class="text-light-black-18 bigEmpty padding">我的订单</text>
					<image class="icon-small" src="../../static/smallarrow.png"></image>
				</view>
			</navigator>
			<view class="lineGray"></view>

			<!-- 		<view class="item padding">
              <image class="icon-normal" src="../../static/minescure.png"></image>
              <text class="text-light-black-18 bigEmpty padding">安全认证</text>
              <image class="icon-small" src="../../static/smallarrow.png"></image>
            </view> -->
			<!-- <view class="lineGray"></view> -->
			<navigator url="/pages/share/share" hover-class="navigator-hover">
				<view class="item padding">
					<image class="icon-normal" src="../../static/mineinvite.png"></image>
					<text class="text-light-black-18 bigEmpty padding">邀请好友</text>
					<image class="icon-small" src="../../static/smallarrow.png"></image>
				</view>
			</navigator>
			<view class="lineGray"></view>
			<navigator url="/pages/AboutUs/AboutUs" hover-class="navigator-hover">
				<view class="item padding">
					<image class="icon-normal" src="../../static/minecontact.png"></image>
					<text class="text-light-black-18 bigEmpty padding">联系我们</text>
					<image class="icon-small" src="../../static/smallarrow.png"></image>
				</view>
			</navigator>
			<view class="lineGray"></view>

			<view class="item padding" @click="logout">
				<image class="icon-normal" src="../../static/minecontact.png"></image>
				<text class="text-light-black-18 bigEmpty padding">退出登录</text>
				<image class="icon-small" src="../../static/smallarrow.png"></image>
			</view>
		</view>
		<view class="centerGroup dialogBg" v-show="showDialog">
			<view class="itemGroup1 dialog padding" style="height: 300rpx;">

				<view class="centerGroup textBlack18" style="font-weight: 900;">提示</view>

				<view class="centerGroup  marginTop">
					<view class="bigEmpty" style="text-align: center;padding-left: 20rpx;padding-right: 20rpx;">
						由于相关规范，IOS系梳(苹果手机)该功能暂不可用!</view>
				</view>

				<view class="centerGroup marginTop" style="margin-top: 60rpx;">
					<button class="ok  textwhite14" open-type="contact" @click="showDialog=false">点击咨询客服</button>
					<!-- <view class="centerGroup ok marginLeft textwhite14" @click="okDialog">点击咨询客服</view> -->
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import request from '/common/request.js';
	export default {
		data() {
			return {
				showDialog: false,
				name: "请登录",
				avator: "/static/personAvatar.png",
				level: 0,
				vipName: "暂无会员",
				vipTime: "2020-04-01",
				vipNum: 0,
				vipbg: "vipbg0",
				vipLable: "vipLable1",
				showVipLabel: false,
				textColor: "textWhite",
				vipLine: "/static/vipline1.png",
				vipLogo: "/static/viplogo1.png",
				publishNum: 0,
				fanNum: 0,
				focusNum: 0
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		onShow: function() {
			var token = uni.getStorageSync("token");
			console.log(token)
			//this.info()
			if (token)
				this.requestInfo()
		},
		onReady: function() {

			this.info()
		},
		methods: {

			requestInfo() {
				const url = getApp().globalData.apiUrl + "/api/v1/user/mine";
				const that = this;
				request(url, "GET", {}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						if (res.code == 0) {
							uni.setStorageSync("token", res.data.token)
							uni.setStorageSync("name", res.data.name)
							uni.setStorageSync("avator", res.data.avator)
							uni.setStorageSync("level", res.data.level)
							uni.setStorageSync("vipName", res.data.vipName)
							uni.setStorageSync("vipNum", res.data.freeFastNum)
							uni.setStorageSync("vipTime", res.data.vipTime)
							uni.setStorageSync("productNum", res.data.productNum)
							uni.setStorageSync("fansNum", res.data.fansNum)
							uni.setStorageSync("commetNum", res.data.commetNum)
							uni.setStorageSync("loveNum", res.data.loveNum)
							uni.setStorageSync("fucusNum", res.data.fucusNum)
							that.name = uni.getStorageSync("name");
							that.avator = uni.getStorageSync("avator");
							that.vipName = uni.getStorageSync("vipName");
							that.vipTime = uni.getStorageSync("vipTime");
							that.publishNum = uni.getStorageSync("productNum");
							that.fanNum = uni.getStorageSync("fansNum");
							that.focusNum = uni.getStorageSync("fucusNum");
							that.vipNum = "当月可用加速次数:" + uni.getStorageSync("vipNum") + "次";
							if (that.vipTime.length > 10) {
								that.vipTime = that.vipTime.substring(0, 10);
							}
							that.level = uni.getStorageSync("level")

							switch (that.level) {
								case 1:
									that.textColor = "textOrange";
									that.showVipLabel = true;
									that.vipName = "青铜权益卡";
									that.vipLogo = "/static/viplogo1.png";
									that.vipLine = "/static/vipline1.png";
									that.vipbg = "vipbg1"
									that.vipLable = "vipLable1"
									break;
								case 2:
									that.textColor = "textSilver";
									that.showVipLabel = true;
									that.vipName = "白银权益卡";
									that.vipLogo = "/static/viplogo2.png";
									that.vipLine = "/static/vipline2.png";
									that.vipbg = "vipbg2"
									that.vipLable = "vipLable2"
									break;

								case 3:
									that.textColor = "textOrange";
									that.showVipLabel = true;
									that.vipName = "黄金权益卡";
									that.vipLogo = "/static/viplogo3.png";
									that.vipLine = "/static/vipline3.png";
									that.vipbg = "vipbg3"
									that.vipLable = "vipLable3"
									break;
								case 4:
									that.textColor = "textOrange";
									that.showVipLabel = true;
									that.vipName = "铂金权益卡";
									that.vipLogo = "/static/viplogo4.png";
									that.vipLine = "/static/vipline4.png";
									that.vipbg = "vipbg4"
									that.vipLable = "vipLable4"

									break;
								case 0:
								default:
									that.textColor = "textWhite";
									that.showVipLabel = false;
									that.vipName = "设辑AI体验卡";
									that.vipbg = "vipbg0"
									that.vipNum = "单日可以用3次"
									break
							}
						}
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},


			info() {

				var name = uni.getStorageSync("name");
				if (name) {
					this.name = uni.getStorageSync("name");
					this.avator = uni.getStorageSync("avator");
					this.vipName = uni.getStorageSync("vipName");
					this.vipTime = uni.getStorageSync("vipTime");
					this.vipNum = "当月可用次数:" + uni.getStorageSync("vipNum") + "次";
					if (this.vipTime.length > 10) {
						this.vipTime = this.vipTime.substring(0, 10);
					}
					this.level = uni.getStorageSync("level")


				} else {
					this.name = "请登录"
					this.avator = "../../static/personAvatar.png"
					this.vipName = "暂无会员",
						this.vipNum = 0;
					this.vipTime = "2020-04-01 00:00";
					this.level = 0
				}

				switch (this.level) {
					case 1:
						this.textColor = "textOrange";
						this.showVipLabel = true;
						this.vipName = "青铜权益卡";
						this.vipLogo = "/static/viplogo1.png";
						this.vipLine = "/static/vipline1.png";
						this.vipbg = "vipbg1"
						this.vipLable = "vipLable1"
						break;
					case 2:
						this.textColor = "textSilver";
						this.showVipLabel = true;
						this.vipName = "白银权益卡";
						this.vipLogo = "/static/viplogo2.png";
						this.vipLine = "/static/vipline2.png";
						this.vipbg = "vipbg2"
						this.vipLable = "vipLable2"
						break;

					case 3:
						this.textColor = "textOrange";
						this.showVipLabel = true;
						this.vipName = "黄金权益卡";
						this.vipLogo = "/static/viplogo3.png";
						this.vipLine = "/static/vipline3.png";
						this.vipbg = "vipbg3"
						this.vipLable = "vipLable3"
						break;
					case 4:
						this.textColor = "textOrange";
						this.showVipLabel = true;
						this.vipName = "铂金权益卡";
						this.vipLogo = "/static/viplogo4.png";
						this.vipLine = "/static/vipline4.png";
						this.vipbg = "vipbg4"
						this.vipLable = "vipLable4"

						break;
					case 0:
					default:
						this.textColor = "textWhite";
						this.showVipLabel = false;
						this.vipName = "设辑AI体验卡";
						this.vipbg = "vipbg0"
						this.vipNum = "单日可以用3次"
						break
				}
			},

			login() {
				var name = uni.getStorageSync("name");
				if (name) {

					uni.navigateTo({
						url: "/pages/UserInfo/UserInfo"
					})
					return
				}
				console.log("login")
				uni.navigateTo({
					url: "/pages/Login/Login"
				})
			},
			logout() {
				uni.clearStorage()
				uni.navigateTo({
					url: "/pages/Login/Login"
				})
			},
			click(id) {

				var name = uni.getStorageSync("name");
				if (name) {
					switch (id) {
						case 1:
							uni.navigateTo({
								url: "/pages/PersonalCenter/PersonalCenter"
							})
							break
						case 2:
							var res = wx.getSystemInfoSync();


							if (res.platform == 'ios') {
								this.showDialog = true;
							} else {
								uni.navigateTo({
									url: "/pages/Coin/Coin"
								})
							}


							break
						case 4:
							uni.navigateTo({
								url: "/pages/Love/Love"
							})
							break
						case 5:
							uni.navigateTo({
								url: "/pages/MyPhoto/MyPhoto?openType=1"
							})
							break



					}
				} else {
					console.log("login")
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
				}

			}

		}
	}
</script>

<style>
	@import url("../../common/uni.css");

	.container {
		background: #F4F4F4;
		min-height: 100vh;
	}

	.dialog {

		width: 65%;

	}

	.dialogBg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.centerGroup {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.itemGroup1 {
		border-radius: 15px;
		height: 200rpx;
		background-color: #ffffff;
	}


	/* 竖屏设置 */
	@media screen and (orientation: portrait) {

		/* 竖屏下的css样式*/
		.viplogo {
			margin-left: 50vw;
			width: 50vw;
			height: 50vw;
			max-width: 40vh;
			max-height: 40vh;
			margin-top: -20vw;
			position: absolute;
		}

		.vipline {
			opacity: 0.1;
			margin-top: -20vw;
			margin-right: -25vw;
			margin-left: 50vw;
			width: 50vw;
			height: 50vw;
			max-width: 20vh;
			max-height: 20vh;
			position: absolute;
		}

	}

	/* 横屏设置 */
	@media screen and (orientation: landscape) {
		/*横屏下的css样式*/

		.viplogo {
			margin-left: 60vw;
			width: 50vw;
			height: 60vw;
			max-width: 50vh;
			max-height: 50vh;
			margin-top: -20vh;
			position: absolute;
		}

		.vipline {
			opacity: 0.1;
			margin-top: -20vw;
			margin-right: -25vw;
			margin-left: 50vw;
			width: 50vw;
			height: 50vw;
			max-width: 50vh;
			max-height: 50vh;
			position: absolute;
		}

	}




	.vipContent {
		height: 25vw;
		max-height: 25vh;
	}

	.vipbg0 {
		background: radial-gradient(123% 123% at 0% 10%, #000000 0%, #D8D8D8 99%);
		box-sizing: border-box;
		border-radius: 15rpx 15rpx 30% 30%;
	}

	.vipbg1 {
		background: radial-gradient(55% 55% at 13% 5%, #F4EEEA 0%, #E5C9B9 100%);
		box-sizing: border-box;
		border-radius: 15rpx 15rpx 30% 30%;
	}

	.vipbg2 {
		background: radial-gradient(55% 55% at 13% 5%, #EDF0F1 0%, #C9D9DE 100%);
		box-sizing: border-box;

		border-radius: 15rpx 15rpx 30% 30%;
	}

	.vipbg3 {
		background: radial-gradient(123% 123% at 0% 10%, #FFECC1 0%, #EAA771 99%);
		box-sizing: border-box;

		border-radius: 15rpx 15rpx 30% 30%;
	}

	.vipbg4 {
		background: linear-gradient(107deg, #F7F4FF 5%, #D3BAFC 45%, #AB94FE 87%);
		box-sizing: border-box;

		border-radius: 15rpx 15rpx 30% 30%;
	}

	.vipLabel {
		width: 100 rpx;
		height: 50 rpx;
		border-radius: 5 rpx;
		opacity: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.vipLable1 {
		background: linear-gradient(130deg, rgba(241, 231, 226, 0.60) -57%, rgba(229, 201, 186, 0.60) 23%, rgba(229, 201, 186, 0.60) 108%);
	}

	.vipLable2 {
		background: linear-gradient(130deg, rgba(230, 236, 238, 0.60) -57%, rgba(202, 217, 222, 0.60) 23%, rgba(201, 217, 222, 0.60) 108%);
	}

	.vipLable3 {
		background: linear-gradient(130deg, rgba(253, 229, 185, 0.60) -57%, rgba(244, 202, 153, 0.60) 23%, rgba(234, 167, 113, 0.60) 108%);
	}

	.vipLable4 {
		background: linear-gradient(130deg, rgba(247, 244, 255, 0.60) -57%, rgba(211, 186, 252, 0.60) 23%, rgba(171, 148, 254, 0.60) 108%);
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.itemText {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}
</style>